<template>
  <div class="all">
    <div class="add-nav">
      <el-radio-group v-model="select" >
      <el-radio-button :label="true">管理员列表</el-radio-button>
      <el-radio-button :label="false">添加管理员</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 管理员列表 -->
    <div class="add-list" v-show="select">
      <table width="100%" cellspacing='0'>
        <thead>
          <tr>
            <th> 序号 </th>
            <th> 用户名 </th>
            <th>所属角色</th>
            <th>最后登录IP</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
            <tr v-for="(val,index) in items">
              <td>{{val.id}}</td>
              <td>{{val.admin}}</td>
              <td>{{val.role}}</td>
              <td>{{val.IP}}</td>
              <td><i v-on:click="msgshop(val)">修改</i>  |  <i>删除</i></td>
            </tr>
          </tbody>
      </table>
       <paging :total="items.length" :prepage="prepage" :show-page="a" v-model="sPage"></paging>
    </div>
    <!-- 添加管理员 -->
    <div class="add-Add" v-show="!select">
      <div style="margin-top: 11px;">
        <div class="Chnav">
          用  &nbsp;户  &nbsp;名：
         <div class="Chinput">      <input type="text" v-model="admin">
          <i class="notice" v-if="admin.length<2||admin.length>20">用户名应该为2-20位之间</i>
         </div>
        </div>

          <div class="Chnav">
          新  &nbsp;密  &nbsp;码：
          <div  class="Chinput">      <input type="password"  v-model="addPassnew">
           <i class="notice" v-if="addPassnew.length<6||addPassnew.length>20">密码应该为6-20位之间</i>
          </div>
        </div>
        <div class="Chnav Chnav-1">
          确认密码：
          <div class="Chinput">      <input type="password" v-model="addrepetition">
            <i class="notice1" v-if="addrepetition===addPassnew&&addrepetition!=''">密码输入一致</i>
              <i class="notice" v-else>请输入确认密码</i>
          </div>
       </div>
       <button v-if="addrepetition==addPassnew && addPassnew.length>=6 &&admin.length>=2" @click="Submit()">提交</button>
      </div>
    </div>
    <!-- 修改管理员密码 -->
<div class="pop-up" v-show="shop===1">
  <h3>修改账号</h3>
  <div class="pop-1">
    修改用户:{{Madmin}}
    <div>
       新密码：
       <div >      <input type="password" v-model="Passnew">
       </div>
     </div>
     <div>
       重复新密码：
       <div>      <input type="password" v-model="repetition">

       </div>
    </div>
  </div>
      <div class="pop-2">
        <button v-if="Passnew!=''&&repetition!=''&&repetition===Passnew">确定</button>
        <button @click="msgPass()">取消</button>
      </div>

</div>
  </div>
</template>

<script>
  export default{
    name:'Addadmin',
    data () {
      return{
        select:true,
        sPage: 1,
        prepage: 10,
        Passnew:'',//新密码
        repetition:'',//重复
        addPassnew:'',//添加新密码
        addrepetition:'',//添加重复
        Madmin:'admin',
        shop:'',
        admin:'',
        items:[
          {
            id:'1',
            admin:'admin',
            role:'超级管理员',
            IP:'xxx.xxx.xxx.xxx',
          },
          {
           id:'2',
           admin:'admin1',
           role:'超级管理员',
           IP:'xxx.xxx.xxx.xxx',
          },
          {
            id:'3',
            admin:'admin2',
            role:'超级管理员',
            IP:'xxx.xxx.xxx.xxx',
          }
        ]
      }
    },
    computed: {
      showList() {
        var _this=this
        var Newitems = [];
        let start = (this.sPage - 1) * this.prepage
        let end = start + this.prepage
        start = Math.max(0, start);
        end = Math.min(end, this.items.length);
          this.items.map(function(i){
            if(i.studentNum.search(_this.studentNum)!=-1&&
            i.nickname.search(_this.nickname)!=-1&&
            i.name.search(_this.message)!=-1&&
            i.EnglishName.search(_this.EnglishName)!=-1){
              Newitems.push(i)
            }
          });
          if(Newitems.length<=10){
            return Newitems
          }else{
            return Newitems.slice(start,end)
          }
      },
      a(){
        var cp = Math.ceil(this.items.length/this.prepage)
        if(cp>=1&&cp<10){
          return cp;
        }else{
          return 10;
        }
      },
      },
      methods:{
        msgshop:function(e){
          this.Madmin=e.admin
          this.shop=1
          //修改密码接口
        },
        msgPass:function(){
          this.shop=""
          this.Passnew='',//新密码
          this.repetition=''
        },
        Submit(){
          var _this=this

          var adminName=_this.$cookies.get('adminName')
           var token=_this.$cookies.get('token')
           var newAdminName=_this.admin
           var password=_this.addPassnew

          // console.log('用户名：'+adminName+'<>')
          this.$axios({
                      method: "POST",
                      url: '/api/admin/add',
                      data: {
                          adminName:adminName,
                          token:token,
                          newAdminName:newAdminName,
                          password:password
                  },
                      headers: {
                          'Content-Type': 'application/json'
                      }
            })

          .then(function(response){
            console.log(response)
          })
          .catch(function(error){
            console.log(error)
          })
        }
      }

  }
</script>

<style lang="scss" scoped src="../../css/Addadmin.css">


</style>
<style>
  .pop-up div{ padding: 8px 0 0 8px;}

</style>
